import * as React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Albums from './Shared/Albums';
import Article from './Shared/Article';
import Chat from './Shared/Chat';
import Contacts from './Shared/Contacts';
import { View, Text, TouchableOpacity, TextInput } from 'react-native';

let select = 'Albums';

class CustomTopTabBar extends React.Component {
  render(): React.ReactNode {
    return (
      <View style={styles.tabContainer}>
        <TextInput
          style={styles.searchInput}
          placeholder="搜索内容..."
          placeholderTextColor="#999"
        />
        <View style={styles.tabIcon}>
          <TouchableOpacity
            style={styles.tabBox}
            onPress={() => {
              this.props.navigation.navigate('Albums');
              select = 'Albums';
            }}>
            <MaterialIcons
              name={'photo-album'}
              size={24}
              color={
                select == 'Albums' ? '#4e5aa0ff' : '#8f8a8aff'
              }></MaterialIcons>
            <Text style={styles.label}>Albums</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.tabBox}
            onPress={() => {
              this.props.navigation.navigate('Article');
              select = 'Article';
            }}>
            <MaterialIcons
              name={'chrome-reader-mode'}
              size={24}
              color={
                select == 'Article' ? '#4e5aa0ff' : '#8f8a8aff'
              }></MaterialIcons>
            <Text style={styles.label}>Article</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.tabBox}
            onPress={() => {
              this.props.navigation.navigate('Home');
              select = 'Albums';
            }}>
            <MaterialIcons
              name={'home'}
              size={24}
              color={'#8f8a8aff'}></MaterialIcons>
            <Text style={styles.label}>Home</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.tabBox}
            onPress={() => {
              this.props.navigation.navigate('Chat');
              select = 'Chat';
            }}>
            <MaterialIcons
              name={'chat-bubble'}
              size={24}
              color={
                select == 'Chat' ? '#4e5aa0ff' : '#8f8a8aff'
              }></MaterialIcons>
            <Text style={styles.label}>Chat</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.tabBox}
            onPress={() => {
              this.props.navigation.navigate('Contacts');
              select = 'Contacts';
            }}>
            <MaterialIcons
              name={'contacts'}
              size={24}
              color={
                select == 'Contacts' ? '#4e5aa0ff' : '#8f8a8aff'
              }></MaterialIcons>
            <Text style={styles.label}>Contacts</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default createBottomTabNavigator(
  {
    Albums: {
      screen: Albums,
    },
    Article: {
      screen: Article,
    },
    Contacts: {
      screen: Chat,
    },
    Chat: {
      screen: Contacts,
    },
  },
  {
    initialRouteName: 'Albums',
    tabBarComponent: CustomTopTabBar,
    KeyboardHidesTabBar: false, //需要键盘
  },
);

const styles = {
  tabContainer: {
    width: '100%',
    flexDirection: 'column',
    padding: 9,
    height: 100,
  },
  tabBox: {
    flexDirection: 'column',
    width: '20%',
    alignItems: 'center',
  },
  label: {
    fontSize: 10,
    textAlign: 'center',
  },
  tabIcon: {
    flexDirection: 'row',
  },
  searchInput: {
    height: 36,
    backgroundColor: '#f5f5f5',
    borderRadius: 18,
    paddingHorizontal: 15,
    fontSize: 14,
    marginBottom: 10,
  },
};